$(() => {
    let firstPosition = 50;
    //  echarts
    //  图1类
    //  L1
    // let heatMapPicL1_1 = echarts.init(document.getElementById('heatMapL1_1'));
    // let heatMapPicL1_2 = echarts.init(document.getElementById('heatMapL1_2'));
    // let heatMapPicL1_3 = echarts.init(document.getElementById('heatMapL1_3'));
    // let heatMapPicL1_4 = echarts.init(document.getElementById('heatMapL1_4'));
    // let heatMapPicL1_5 = echarts.init(document.getElementById('heatMapL1_5'));
    // let heatMapPicL1_6 = echarts.init(document.getElementById('heatMapL1_6'));
    // let heatMapPicL1_7 = echarts.init(document.getElementById('heatMapL1_7'));
    // let heatMapPicL1_8 = echarts.init(document.getElementById('heatMapL1_8'));
    // let heatMapPicL1_9 = echarts.init(document.getElementById('heatMapL1_9'));
    // let heatMapPicL1_0 = echarts.init(document.getElementById('heatMapL1_0'));

    //  L2
    let heatMapPicL2_1 = echarts.init(document.getElementById('heatMapL2_1'));
    let heatMapPicL2_2 = echarts.init(document.getElementById('heatMapL2_2'));
    let heatMapPicL2_3 = echarts.init(document.getElementById('heatMapL2_3'));
    let heatMapPicL2_4 = echarts.init(document.getElementById('heatMapL2_4'));
    let heatMapPicL2_5 = echarts.init(document.getElementById('heatMapL2_5'));
    let heatMapPicL2_6 = echarts.init(document.getElementById('heatMapL2_6'));
    let heatMapPicL2_7 = echarts.init(document.getElementById('heatMapL2_7'));
    let heatMapPicL2_8 = echarts.init(document.getElementById('heatMapL2_8'));
    let heatMapPicL2_9 = echarts.init(document.getElementById('heatMapL2_9'));
    let heatMapPicL2_10 = echarts.init(document.getElementById('heatMapL2_10'));
    let heatMapPicL2_11 = echarts.init(document.getElementById('heatMapL2_11'));
    let heatMapPicL2_12 = echarts.init(document.getElementById('heatMapL2_12'));
    let heatMapPicL2_13 = echarts.init(document.getElementById('heatMapL2_13'));
    let heatMapPicL2_14 = echarts.init(document.getElementById('heatMapL2_14'));
    let heatMapPicL2_15 = echarts.init(document.getElementById('heatMapL2_15'));
    let heatMapPicL2_16 = echarts.init(document.getElementById('heatMapL2_16'));
    let heatMapPicL2_17 = echarts.init(document.getElementById('heatMapL2_17'));
    let heatMapPicL2_18 = echarts.init(document.getElementById('heatMapL2_18'));
    let heatMapPicL2_19 = echarts.init(document.getElementById('heatMapL2_19'));
    //  L3
    let heatMapPicL3_0 = echarts.init(document.getElementById('heatMapL3_0'));

    //  图2类
    //  L1
    // let s_heatMapPicL1_1 = echarts.init(document.getElementById('s_heatMapL1_1'));
    // let s_heatMapPicL1_2 = echarts.init(document.getElementById('s_heatMapL1_2'));
    // let s_heatMapPicL1_3 = echarts.init(document.getElementById('s_heatMapL1_3'));
    // let s_heatMapPicL1_4 = echarts.init(document.getElementById('s_heatMapL1_4'));
    // let s_heatMapPicL1_5 = echarts.init(document.getElementById('s_heatMapL1_5'));
    // let s_heatMapPicL1_6 = echarts.init(document.getElementById('s_heatMapL1_6'));
    // let s_heatMapPicL1_7 = echarts.init(document.getElementById('s_heatMapL1_7'));
    // let s_heatMapPicL1_8 = echarts.init(document.getElementById('s_heatMapL1_8'));
    // let s_heatMapPicL1_9 = echarts.init(document.getElementById('s_heatMapL1_9'));
    // let s_heatMapPicL1_0 = echarts.init(document.getElementById('s_heatMapL1_0'));
    //
    // let s_linePicL1_1 = echarts.init(document.getElementById('s_lineL1_1'));
    // let s_linePicL1_2 = echarts.init(document.getElementById('s_lineL1_2'));
    // let s_linePicL1_3 = echarts.init(document.getElementById('s_lineL1_3'));
    // let s_linePicL1_4 = echarts.init(document.getElementById('s_lineL1_4'));
    // let s_linePicL1_5 = echarts.init(document.getElementById('s_lineL1_5'));
    // let s_linePicL1_6 = echarts.init(document.getElementById('s_lineL1_6'));
    // let s_linePicL1_7 = echarts.init(document.getElementById('s_lineL1_7'));
    // let s_linePicL1_8 = echarts.init(document.getElementById('s_lineL1_8'));
    // let s_linePicL1_9 = echarts.init(document.getElementById('s_lineL1_9'));
    // let s_linePicL1_0 = echarts.init(document.getElementById('s_lineL1_0'));
    //  L2
    let s_heatMapPicL2_1 = echarts.init(document.getElementById('s_heatMapL2_1'));
    let s_heatMapPicL2_2 = echarts.init(document.getElementById('s_heatMapL2_2'));
    let s_heatMapPicL2_3 = echarts.init(document.getElementById('s_heatMapL2_3'));
    let s_heatMapPicL2_4 = echarts.init(document.getElementById('s_heatMapL2_4'));
    let s_heatMapPicL2_5 = echarts.init(document.getElementById('s_heatMapL2_5'));
    let s_heatMapPicL2_6 = echarts.init(document.getElementById('s_heatMapL2_6'));
    let s_heatMapPicL2_7 = echarts.init(document.getElementById('s_heatMapL2_7'));
    let s_heatMapPicL2_8 = echarts.init(document.getElementById('s_heatMapL2_8'));
    let s_heatMapPicL2_9 = echarts.init(document.getElementById('s_heatMapL2_9'));
    let s_heatMapPicL2_10 = echarts.init(document.getElementById('s_heatMapL2_10'));
    let s_heatMapPicL2_11 = echarts.init(document.getElementById('s_heatMapL2_11'));
    let s_heatMapPicL2_12 = echarts.init(document.getElementById('s_heatMapL2_12'));
    let s_heatMapPicL2_13 = echarts.init(document.getElementById('s_heatMapL2_13'));
    let s_heatMapPicL2_14 = echarts.init(document.getElementById('s_heatMapL2_14'));
    let s_heatMapPicL2_15 = echarts.init(document.getElementById('s_heatMapL2_15'));
    let s_heatMapPicL2_16 = echarts.init(document.getElementById('s_heatMapL2_16'));
    let s_heatMapPicL2_17 = echarts.init(document.getElementById('s_heatMapL2_17'));
    let s_heatMapPicL2_18 = echarts.init(document.getElementById('s_heatMapL2_18'));
    let s_heatMapPicL2_19 = echarts.init(document.getElementById('s_heatMapL2_19'));

    let s_linePicL2_1 = echarts.init(document.getElementById('s_lineL2_1'));
    let s_linePicL2_2 = echarts.init(document.getElementById('s_lineL2_2'));
    let s_linePicL2_3 = echarts.init(document.getElementById('s_lineL2_3'));
    let s_linePicL2_4 = echarts.init(document.getElementById('s_lineL2_4'));
    let s_linePicL2_5 = echarts.init(document.getElementById('s_lineL2_5'));
    let s_linePicL2_6 = echarts.init(document.getElementById('s_lineL2_6'));
    let s_linePicL2_7 = echarts.init(document.getElementById('s_lineL2_7'));
    let s_linePicL2_8 = echarts.init(document.getElementById('s_lineL2_8'));
    let s_linePicL2_9 = echarts.init(document.getElementById('s_lineL2_9'));
    let s_linePicL2_10 = echarts.init(document.getElementById('s_lineL2_10'));
    let s_linePicL2_11 = echarts.init(document.getElementById('s_lineL2_11'));
    let s_linePicL2_12 = echarts.init(document.getElementById('s_lineL2_12'));
    let s_linePicL2_13 = echarts.init(document.getElementById('s_lineL2_13'));
    let s_linePicL2_14 = echarts.init(document.getElementById('s_lineL2_14'));
    let s_linePicL2_15 = echarts.init(document.getElementById('s_lineL2_15'));
    let s_linePicL2_16 = echarts.init(document.getElementById('s_lineL2_16'));
    let s_linePicL2_17 = echarts.init(document.getElementById('s_lineL2_17'));
    let s_linePicL2_18 = echarts.init(document.getElementById('s_lineL2_18'));
    let s_linePicL2_19 = echarts.init(document.getElementById('s_lineL2_19'));
    //  L3
    let s_heatMapPicL3_0 = echarts.init(document.getElementById('s_heatMapL3_0'));
    let s_linePicL3_0 = echarts.init(document.getElementById('s_lineL3_0'));


    //  处理后台传过来的数据
    // function changeData(allData, firstRowData) {
    //     let result = [];
    //     for (let i = 0; i < allData[0].length; i++) {
    //         allData[0][i] = parseFloat(allData[0][i]);
    //     }
    //     for (let i = 1; i < firstRowData.length; i++) {     //  解析数据
    //         for (let j = 0; j < allData[0].length; j++) {
    //             let inData = [];
    //             inData.push((allData[0][j] * 100 / 3));     //  x轴坐标,0.03,0.06...变为1,2,...
    //             // inData.push(firstRowData[i]);    //  y轴坐标,第一行原始值
    //             inData.push(i - 1);     //  y轴坐标,0,1,2...
    //             if (allData[i][j] > 1 || allData[i][j] < 0) {   //  移除坏数据
    //                 allData[i][j] = null;
    //             }
    //             inData.push(allData[i][j]);     //  数据值
    //             result.push(inData);
    //         }
    //     }
    //     for (let i = 0; i < result.length; i++) {      //  交换xy坐标
    //         let temp;
    //         temp = result[i][0];
    //         result[i][0] = result[i][1];
    //         result[i][1] = temp;
    //     }
    //     return result;  //  返回heatMap需要的数据  类型:[[0,0,0.5],[0,1,0.6],...]
    // }

    //  路径获取
    function getContextPath() {
        let strPath = window.document.location.pathname;
        return strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
    }

    // let heatmapData = [];
    // let lineData=[];
    $.ajax({
        type: "POST",
        url: getContextPath() + "/path",
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify({name: "b.csv"}),
        success(data) {
            let jsonData = JSON.parse(data);
            // heatmapData = changeData(jsonData.allData, jsonData.firstRowData);
            // for (let i = 0; i < heatmapData.length; i++) {
            //     lineData.push(heatmapData[i][2]);
            // }
            // console.log(lineData);
            // heatMapPicL1_1.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_2.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_3.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_4.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_5.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_6.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_7.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_8.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_9.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL1_0.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
            // heatMapPicL3_0.setOption({
            //     series: [{  //  heatMap
            //         data: heatmapData,
            //     }, {  //  line
            //     }]
            // });
        },
        error() {
            console.log("fail");
        }
    });


    let xData = [];
    let yData = [];
    //  x坐标
    for (let i = 0; i <= 136; i++) {
        xData.push(i);
    }
    //  y坐标
    for (let j = 0; j < 401; j++) {
        yData.push(j);
    }

    // s_heatMapOption = {
    //     tooltip: {},
    //     grid: [{    //  heatMap
    //         height: '50%',
    //         width: '60%',
    //         top: '15%',
    //         left: '12%'
    //     }, {    //  line
    //         height: '50%',
    //         width: '60%',
    //         top: '15%',
    //         left: '12%'
    //     }, {
    //         height: '50%',
    //         width: '20%',
    //         top: '15%',
    //         left: '75%'
    //     }, {
    //         height: '50%',
    //         width: '20%',
    //         top: '15%',
    //         left: '75%'
    //     }],
    //     xAxis: [{   //  heatMap
    //         show: false,
    //         type: 'category',
    //         data: xData,
    //         gridIndex: 0,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         id: 'heatMap'
    //     }, {   //  line
    //         // show: false,
    //         type: 'category',
    //         data: xData,
    //         max: 24, //  (x轴显示时间)
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         gridIndex: 1,
    //         id: 'heatMap1'
    //     }, {   //  line
    //         // show: false,
    //         type: 'category',
    //         data: xData,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         gridIndex: 2,
    //     }, {   //  line
    //         // show: false,
    //         type: 'category',
    //         data: xData,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         gridIndex: 3,
    //     }],
    //     yAxis: [{   //  heatMap
    //         show: false,
    //         type: 'category',
    //         data: yData,
    //         gridIndex: 0,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //     }, {    //  line
    //         // show: false,
    //         type: 'category',
    //         data: yData,
    //         max: 12,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         gridIndex: 1,
    //     }, {    //  line
    //         // show: false,
    //         type: 'category',
    //         data: yData,
    //         max: 12,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         gridIndex: 2,
    //     }, {    //  line
    //         // show: false,
    //         type: 'category',
    //         data: yData,
    //         max: 12,
    //         axisLine: {  //  轴线属性
    //             lineStyle: {
    //                 color: '#f2f2f2'
    //             }
    //         },
    //         gridIndex: 3,
    //     }],
    //     visualMap: [{
    //         min: 0,
    //         max: 1,
    //         itemHeight: '100%',
    //         itemWidth: '10%',
    //         calculable: false,  //  控制拖动
    //         realtime: false,
    //         text: ['1', '-1'],
    //         textStyle: {
    //             color: '#fff'
    //         },
    //         inRange: {
    //             color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    //         },
    //         top: '10%',
    //         left: '0%'
    //     }],
    //     series: [{  //  heatMap
    //         type: 'heatmap',
    //         data: [],
    //         emphasis: {
    //             itemStyle: {
    //                 borderColor: '#333',
    //                 borderWidth: 1
    //             }
    //         },
    //         progressive: 1000,
    //         animation: false,
    //     }, {  //  line
    //         type: 'line',
    //         data: [],
    //     }, {  //  line
    //         type: 'line',
    //         data: [],
    //     }, {  //  line
    //         type: 'line',
    //         data: [],
    //     }]
    // };  //  图2类热力图

    lineOption = {
        grid: [{    // 左
            height: '50%',
            width: '60%',
            top: '15%',
            left: '12%'
        }, {    // 左覆盖
            height: '50%',
            width: '60%',
            top: '15%',
            left: '12%'
        }, {    //  右
            height: '50%',
            width: '20%',
            top: '15%',
            left: '75%'
        }, {    //  右覆盖
            height: '50%',
            width: '20%',
            top: '15%',
            left: '75%'
        }],
        xAxis: [{   // 左
            show: false,
            type: 'category',
            data: xData,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 0,
            id: 'lineXPosition'
        }, {   // 左覆盖
            // show: false,
            type: 'category',
            max: 24,
            data: xData,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
        }, {    //  右
            show: false,
            type: 'value',
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: false
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 2
        }, {    //  右覆盖
            // show: false,
            type: 'value',
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: false
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 3
        }],
        yAxis: [{   // 左
            show: false,
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 0,
            id: 'lineXPosition'
        }, {   // 左覆盖
            // show: false,
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
        }, {    //  右
            show: false,
            type: 'category',
            data: yData,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 2
        }, {    //  右覆盖
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 3
        }],
        series: [{
            data: [],
            type: 'line',
            markLine: {
                symbol: 'none',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        lineStyle: {
                            type: 'solid',
                            color: '#333 ',
                            width: 2,
                        },
                        label: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                                fontWeight: "bolder",
                            },
                        }
                    },
                },
                data: [
                    {xAxis: firstPosition},
                ],
            }
        }, {    //  左覆盖
            data: [],
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1
        }, {    //  右
            data: [],
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2
        }, {     //  右覆盖
            data: [],
            type: 'line',
            xAxisIndex: 3,
            yAxisIndex: 3
        }]
    };

    s_heatMapOption = {
        tooltip: {},
        grid: [{    //  左上
            height: '50%',
            width: '60%',
            top: '15%',
            left: '12%'
        }],
        xAxis: [{   //  左上
            show: false,
            type: 'category',
            data: xData,
            gridIndex: 0,
            id: 'heatMap'
        }],
        yAxis: [{
            show: false,
            type: 'category',
            data: yData,
            gridIndex: 0,
            axisLabel: {
                interval: 20,   //  隔20个显示一个坐标
            },
            id: 'heatMap'
        }],
        visualMap: [{
            min: 0,
            max: 1,
            itemHeight: '100%',
            itemWidth: '10%',
            calculable: false,  //  控制拖动
            realtime: false,
            text: ['1', '-1'],
            textStyle: {
                color: '#fff'
            },
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            top: '0%',
        }],
        series: [{  //  左上图
            type: 'heatmap',
            data: [],
            //  标识线
            emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1
                }
            },
            progressive: 1000,
            animation: false,
        }]
    };

    heatMapOption = {
        tooltip: {},
        grid: [{    //  heatMap
            height: '60%',
            width: '70%',
            top: '15%',
            left: '20%'
        }, {    //  line
            height: '60%',
            width: '70%',
            top: '15%',
            left: '20%'
        }],
        xAxis: [{   //  heatMap
            show: false,
            type: 'category',
            data: xData,
            gridIndex: 0,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            id: 'heatMap'
        }, {   //  line
            // show: false,
            type: 'category',
            data: xData,
            max: 24, //  (x轴显示时间)
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
            id: 'heatMap1'
        }],
        yAxis: [{   //  heatMap
            show: false,
            type: 'category',
            data: yData,
            gridIndex: 0,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            id: 'heatMap'
        }, {    //  line
            // show: false,
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
            id: 'heatMap1'
        }],
        visualMap: [{
            min: 0,
            max: 1,
            itemHeight: '100%',
            calculable: false,  //  控制拖动
            realtime: false,
            text: ['1', '-1'],
            textStyle: {
                color: '#fff'
            },
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            top: '10%',
            left: '3%'
        }],
        series: [{  //  heatMap
            type: 'heatmap',
            data: [],
            emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1
                }
            },
            progressive: 1000,
            animation: false,
        }, {  //  line
            type: 'line',
            data: [],
        }]
    };  //  图1类热力图

    //  图1类
    //  L1
    // heatMapPicL1_1.setOption(heatMapOption);
    // heatMapPicL1_2.setOption(heatMapOption);
    // heatMapPicL1_3.setOption(heatMapOption);
    // heatMapPicL1_4.setOption(heatMapOption);
    // heatMapPicL1_5.setOption(heatMapOption);
    // heatMapPicL1_6.setOption(heatMapOption);
    // heatMapPicL1_7.setOption(heatMapOption);
    // heatMapPicL1_8.setOption(heatMapOption);
    // heatMapPicL1_9.setOption(heatMapOption);
    // heatMapPicL1_0.setOption(heatMapOption);

    //  L2
    heatMapPicL2_1.setOption(heatMapOption);
    heatMapPicL2_2.setOption(heatMapOption);
    heatMapPicL2_3.setOption(heatMapOption);
    heatMapPicL2_4.setOption(heatMapOption);
    heatMapPicL2_5.setOption(heatMapOption);
    heatMapPicL2_6.setOption(heatMapOption);
    heatMapPicL2_7.setOption(heatMapOption);
    heatMapPicL2_8.setOption(heatMapOption);
    heatMapPicL2_9.setOption(heatMapOption);
    heatMapPicL2_10.setOption(heatMapOption);
    heatMapPicL2_11.setOption(heatMapOption);
    heatMapPicL2_12.setOption(heatMapOption);
    heatMapPicL2_13.setOption(heatMapOption);
    heatMapPicL2_14.setOption(heatMapOption);
    heatMapPicL2_15.setOption(heatMapOption);
    heatMapPicL2_16.setOption(heatMapOption);
    heatMapPicL2_17.setOption(heatMapOption);
    heatMapPicL2_18.setOption(heatMapOption);
    heatMapPicL2_19.setOption(heatMapOption);


    //  L3
    heatMapPicL3_0.setOption(heatMapOption);
    heatMapPicL3_0.setOption({
        visualMap: [{
            itemHeight: '500%',
            top: '15%',
            left: '10%'
        }]
    });

    //  图2类
    //  L1
    // s_heatMapPicL1_1.setOption(s_heatMapOption);
    // s_heatMapPicL1_2.setOption(s_heatMapOption);
    // s_heatMapPicL1_3.setOption(s_heatMapOption);
    // s_heatMapPicL1_4.setOption(s_heatMapOption);
    // s_heatMapPicL1_5.setOption(s_heatMapOption);
    // s_heatMapPicL1_6.setOption(s_heatMapOption);
    // s_heatMapPicL1_7.setOption(s_heatMapOption);
    // s_heatMapPicL1_8.setOption(s_heatMapOption);
    // s_heatMapPicL1_9.setOption(s_heatMapOption);
    // s_heatMapPicL1_0.setOption(s_heatMapOption);
    //
    // s_linePicL1_1.setOption(lineOption);
    // s_linePicL1_2.setOption(lineOption);
    // s_linePicL1_3.setOption(lineOption);
    // s_linePicL1_4.setOption(lineOption);
    // s_linePicL1_5.setOption(lineOption);
    // s_linePicL1_6.setOption(lineOption);
    // s_linePicL1_7.setOption(lineOption);
    // s_linePicL1_8.setOption(lineOption);
    // s_linePicL1_9.setOption(lineOption);
    // s_linePicL1_0.setOption(lineOption);


    //  L2
    s_heatMapPicL2_1.setOption(s_heatMapOption);
    s_heatMapPicL2_2.setOption(s_heatMapOption);
    s_heatMapPicL2_3.setOption(s_heatMapOption);
    s_heatMapPicL2_4.setOption(s_heatMapOption);
    s_heatMapPicL2_5.setOption(s_heatMapOption);
    s_heatMapPicL2_6.setOption(s_heatMapOption);
    s_heatMapPicL2_7.setOption(s_heatMapOption);
    s_heatMapPicL2_8.setOption(s_heatMapOption);
    s_heatMapPicL2_9.setOption(s_heatMapOption);
    s_heatMapPicL2_10.setOption(s_heatMapOption);
    s_heatMapPicL2_11.setOption(s_heatMapOption);
    s_heatMapPicL2_12.setOption(s_heatMapOption);
    s_heatMapPicL2_13.setOption(s_heatMapOption);
    s_heatMapPicL2_14.setOption(s_heatMapOption);
    s_heatMapPicL2_15.setOption(s_heatMapOption);
    s_heatMapPicL2_16.setOption(s_heatMapOption);
    s_heatMapPicL2_17.setOption(s_heatMapOption);
    s_heatMapPicL2_18.setOption(s_heatMapOption);
    s_heatMapPicL2_19.setOption(s_heatMapOption);

    s_linePicL2_1.setOption(lineOption);
    s_linePicL2_2.setOption(lineOption);
    s_linePicL2_3.setOption(lineOption);
    s_linePicL2_4.setOption(lineOption);
    s_linePicL2_5.setOption(lineOption);
    s_linePicL2_6.setOption(lineOption);
    s_linePicL2_7.setOption(lineOption);
    s_linePicL2_8.setOption(lineOption);
    s_linePicL2_9.setOption(lineOption);
    s_linePicL2_10.setOption(lineOption);
    s_linePicL2_11.setOption(lineOption);
    s_linePicL2_12.setOption(lineOption);
    s_linePicL2_13.setOption(lineOption);
    s_linePicL2_14.setOption(lineOption);
    s_linePicL2_15.setOption(lineOption);
    s_linePicL2_16.setOption(lineOption);
    s_linePicL2_17.setOption(lineOption);
    s_linePicL2_18.setOption(lineOption);
    s_linePicL2_19.setOption(lineOption);

    //  L3
    s_heatMapPicL3_0.setOption(s_heatMapOption);
    s_heatMapPicL3_0.setOption({
        visualMap: [{
            itemHeight: '450%',
            top: '10%',
            left: '5%'
        }]
    });
    s_linePicL3_0.setOption(lineOption);


    //  左侧按钮
    $("#downLeft_L1").on("click", function () {
        document.getElementById("downRight_L1").style.display = "block";
        document.getElementById("downRight_L2").style.display = "none";
        document.getElementById("downRight_L3").style.display = "none";
        document.getElementById("downLeft_L1").style.opacity = "0.5";
        document.getElementById("downLeft_L2").style.opacity = "1";
        document.getElementById("downLeft_L3").style.opacity = "1";
        if (judgeTop) {
            document.getElementById("mid_L1").style.display = "block";
            document.getElementById("mid_L2").style.display = "none";
            document.getElementById("mid_L3").style.display = "none";
            document.getElementById("downRight_L1").style.display = "block";
            document.getElementById("s_downRight_L1").style.display = "none";
        } else {
            document.getElementById("s_mid_L1").style.display = "block";
            document.getElementById("s_mid_L2").style.display = "none";
            document.getElementById("s_mid_L3").style.display = "none";
            document.getElementById("s_downRight_L1").style.display = "block";
            document.getElementById("downRight_L1").style.display = "none";
        }

    });

    $("#downLeft_L2").on("click", function () {
        document.getElementById("downRight_L1").style.display = "none";
        document.getElementById("downRight_L2").style.display = "block";
        document.getElementById("downRight_L3").style.display = "none";
        document.getElementById("downLeft_L1").style.opacity = "1";
        document.getElementById("downLeft_L2").style.opacity = "0.5";
        document.getElementById("downLeft_L3").style.opacity = "1";
        if (judgeTop) {
            document.getElementById("mid_L1").style.display = "none";
            document.getElementById("mid_L2").style.display = "block";
            document.getElementById("mid_L3").style.display = "none";
        } else {
            document.getElementById("s_mid_L1").style.display = "none";
            document.getElementById("s_mid_L2").style.display = "block";
            document.getElementById("s_mid_L3").style.display = "none";
            document.getElementById("s_downRight_L1").style.display = "none";
        }

    });

    $("#downLeft_L3").on("click", function () {
        document.getElementById("downRight_L1").style.display = "none";
        document.getElementById("downRight_L2").style.display = "none";
        document.getElementById("downRight_L3").style.display = "block";
        document.getElementById("downLeft_L1").style.opacity = "1";
        document.getElementById("downLeft_L2").style.opacity = "1";
        document.getElementById("downLeft_L3").style.opacity = "0.5";
        if (judgeTop) {
            document.getElementById("mid_L1").style.display = "none";
            document.getElementById("mid_L2").style.display = "none";
            document.getElementById("mid_L3").style.display = "block";
        } else {
            document.getElementById("s_mid_L1").style.display = "none";
            document.getElementById("s_mid_L2").style.display = "none";
            document.getElementById("s_mid_L3").style.display = "block";
            document.getElementById("s_downRight_L1").style.display = "none";
        }

    });

    let judgeTop = true;
    $("#top_1").on("click", function () {   // 点击图1类
        document.getElementById("top_1").style.opacity = "0.5";
        document.getElementById("top_2").style.opacity = "1";
        document.getElementById("first").style.display = "block";
        document.getElementById("second").style.display = "none";
        document.getElementById("downRight_L1").style.display = "none";
        document.getElementById("downRight_L2").style.display = "none";
        document.getElementById("downRight_L3").style.display = "none";
        document.getElementById("s_downRight_L1").style.display = "none";
        document.getElementById("downLeft_L1").style.opacity = "1";
        document.getElementById("downLeft_L2").style.opacity = "1";
        document.getElementById("downLeft_L3").style.opacity = "1";
        judgeTop = true;
    });

    $("#top_2").on("click", function () {   // 点击图2类
        document.getElementById("top_1").style.opacity = "1";
        document.getElementById("top_2").style.opacity = "0.5";
        document.getElementById("first").style.display = "none";
        document.getElementById("second").style.display = "block";
        document.getElementById("downRight_L1").style.display = "none";
        document.getElementById("downRight_L2").style.display = "none";
        document.getElementById("downRight_L3").style.display = "none";
        document.getElementById("s_downRight_L1").style.display = "none";
        document.getElementById("downLeft_L1").style.opacity = "1";
        document.getElementById("downLeft_L2").style.opacity = "1";
        document.getElementById("downLeft_L3").style.opacity = "1";
        judgeTop = false;
    });

    function showDiv(nowId, id, num) {
        for (let i = 1; i < num + 1; i++) {
            if (id + i === nowId) {
                document.getElementById(id + i).style.display = "block";
            } else {
                document.getElementById(id + i).style.display = "none";
            }
        }
    }


    //  L2六个按钮
    $("#downRight_L2_1").on("click", function () {
        if (judgeTop) {
            showDiv("mid_L2_section1", "mid_L2_section", 6);
        } else {
            showDiv("s_mid_L2_section1", "s_mid_L2_section", 6);
        }
        // if (judgeTop) {
        //     document.getElementById("mid_L2_section1").style.display = "block";
        //     document.getElementById("mid_L2_section2").style.display = "none";
        //     document.getElementById("mid_L2_section3").style.display = "none";
        //     document.getElementById("mid_L2_section4").style.display = "none";
        //     document.getElementById("mid_L2_section5").style.display = "none";
        //     document.getElementById("mid_L2_section6").style.display = "none";
        // } else {
        //     document.getElementById("s_mid_L2_section1").style.display = "block";
        //     document.getElementById("s_mid_L2_section2").style.display = "none";
        //     document.getElementById("s_mid_L2_section3").style.display = "none";
        //     document.getElementById("s_mid_L2_section4").style.display = "none";
        //     document.getElementById("s_mid_L2_section5").style.display = "none";
        //     document.getElementById("s_mid_L2_section6").style.display = "none";
        // }

        L2 = [true, false, false, false, false, false];     //  选中第一个

    });

    $("#downRight_L2_2").on("click", function () {
        if (judgeTop) {
            showDiv("mid_L2_section2", "mid_L2_section", 6);
        } else {
            showDiv("s_mid_L2_section2", "s_mid_L2_section", 6);
        }
        L2 = [false, true, false, false, false, false];     //  选中第二个

    });

    $("#downRight_L2_3").on("click", function () {
        if (judgeTop) {
            showDiv("mid_L2_section3", "mid_L2_section", 6);
        } else {
            showDiv("s_mid_L2_section3", "s_mid_L2_section", 6);
        }
        L2 = [false, false, true, false, false, false];
    });

    $("#downRight_L2_4").on("click", function () {
        if (judgeTop) {
            showDiv("mid_L2_section4", "mid_L2_section", 6);
        } else {
            showDiv("s_mid_L2_section4", "s_mid_L2_section", 6);
        }
        L2 = [false, false, false, true, false, false];
    });

    $("#downRight_L2_5").on("click", function () {
        if (judgeTop) {
            showDiv("mid_L2_section5", "mid_L2_section", 6);
        } else {
            showDiv("s_mid_L2_section5", "s_mid_L2_section", 6);
        }
        L2 = [false, false, false, false, true, false];
    });

    $("#downRight_L2_6").on("click", function () {
        if (judgeTop) {
            showDiv("mid_L2_section6", "mid_L2_section", 6);
        } else {
            showDiv("s_mid_L2_section6", "s_mid_L2_section", 6);
        }
        L2 = [false, false, false, false, false, true];
    });


    let L2 = [false, false, false, false, false, false];

    function s_scaleL1_Pic(id, heatMapId, lineId, heat, line, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L1_Pic').addClass('scale_L1_Pic');
                $("#" + lineId).removeClass('L1_Pic').addClass('scale_L1_Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L1_Pic').addClass('L1_Pic');
                $("#" + lineId).removeClass('scale_L1_Pic').addClass('L1_Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            }
            heat.resize();
            line.resize();
        });
    }

    // s_scaleL1_Pic("s_L1_0", "s_heatMapL1_0","s_lineL1_0", s_heatMapPicL1_0, s_linePicL1_0,0);
    // s_scaleL1_Pic("s_L1_1", "s_heatMapL1_1","s_lineL1_1", s_heatMapPicL1_1, s_linePicL1_1,0);
    // s_scaleL1_Pic("s_L1_2", "s_heatMapL1_2","s_lineL1_2", s_heatMapPicL1_2, s_linePicL1_2,0);
    // s_scaleL1_Pic("s_L1_3", "s_heatMapL1_3","s_lineL1_3", s_heatMapPicL1_3, s_linePicL1_3,0);
    // s_scaleL1_Pic("s_L1_4", "s_heatMapL1_4","s_lineL1_4", s_heatMapPicL1_4, s_linePicL1_4,0);
    // s_scaleL1_Pic("s_L1_5", "s_heatMapL1_5","s_lineL1_5", s_heatMapPicL1_5, s_linePicL1_5,0);
    // s_scaleL1_Pic("s_L1_6", "s_heatMapL1_6","s_lineL1_6", s_heatMapPicL1_6, s_linePicL1_6,0);
    // s_scaleL1_Pic("s_L1_7", "s_heatMapL1_7","s_lineL1_7", s_heatMapPicL1_7, s_linePicL1_7,0);
    // s_scaleL1_Pic("s_L1_8", "s_heatMapL1_8","s_lineL1_8", s_heatMapPicL1_8, s_linePicL1_8,0);
    // s_scaleL1_Pic("s_L1_9", "s_heatMapL1_9","s_lineL1_9", s_heatMapPicL1_9, s_linePicL1_9,0);


    //  单击L2小图放大
    //  后项散射系数
    function scaleL2_1(id) {
        let count = 0;
        $("#" + id).on("dblclick", function () {
            if (count % 2 === 0) {
                for (let i = 0; i < 5; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "none";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "none";
                        }
                    }
                }
                $(this).removeClass('scalePreChangeL2_5').addClass('scaleChange_L2');
                count++;
            } else {
                for (let i = 0; i < 5; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "block";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "block";
                        }
                    }
                }
                $(this).removeClass('scaleChange_L2').addClass('scalePreChangeL2_5');
                count++
            }
        });
    }

    for (let i = 0; i < 5; i++) {
        scaleL2_1("L2_" + i);
        scaleL2_1("s_L2_" + i);
    }

    //  消光系数
    function scaleL2_2(id) {
        let count = 0;
        $("#" + id).on("dblclick", function () {
            if (count % 2 === 0) {
                for (let i = 5; i < 10; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "none";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "none";
                        }
                    }
                }
                $(this).removeClass('scalePreChangeL2_5').addClass('scaleChange_L2');
                count++;
            } else {
                for (let i = 5; i < 10; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "block";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "block";
                        }
                    }
                }
                $(this).removeClass('scaleChange_L2').addClass('scalePreChangeL2_5');
                count++
            }
        });
    }

    for (let i = 5; i < 10; i++) {
        scaleL2_2("L2_" + i);
        scaleL2_2("s_L2_" + i);
    }

    //  退偏比
    function scaleL2_3(id) {
        let count = 0;
        $("#" + id).on("dblclick", function () {
            if (count % 2 === 0) {
                for (let i = 10; i < 12; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "none";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "none";
                        }
                    }
                }
                $(this).removeClass('scalePreChangeL2_2').addClass('scaleChange_L2');
                count++;
            } else {
                for (let i = 10; i < 12; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "block";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "block";
                        }
                    }
                }
                $(this).removeClass('scaleChange_L2').addClass('scalePreChangeL2_2');
                count++
            }
        });
    }

    for (let i = 10; i < 12; i++) {
        scaleL2_3("L2_" + i);
        scaleL2_3("s_L2_" + i);
    }

    //  颜色比
    function scaleL2_4(id) {
        let count = 0;
        $("#" + id).on("dblclick", function () {
            if (count % 2 === 0) {
                for (let i = 12; i < 16; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "none";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "none";
                        }
                    }
                }
                $(this).removeClass('scalePreChangeL2_4').addClass('scaleChange_L2');
                count++;
            } else {
                for (let i = 12; i < 16; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "block";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "block";
                        }
                    }
                }
                $(this).removeClass('scaleChange_L2').addClass('scalePreChangeL2_4');
                count++
            }
        });
    }

    for (let i = 12; i < 16; i++) {
        scaleL2_4("L2_" + i);
        scaleL2_4("s_L2_" + i);
    }

    //  激光雷达比
    function scaleL2_5(id) {
        let count = 0;
        $("#" + id).on("dblclick", function () {
            if (count % 2 === 0) {
                for (let i = 17; i < 19; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "none";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "none";
                        }
                    }
                }
                $(this).removeClass('scalePreChangeL2_2').addClass('scaleChange_L2');
                count++;
            } else {
                for (let i = 17; i < 19; i++) {
                    if (judgeTop) {
                        if (id !== "L2_" + i) {
                            document.getElementById('L2_' + i).style.display = "block";
                        }
                    } else {
                        if (id !== "s_L2_" + i) {
                            document.getElementById('s_L2_' + i).style.display = "block";
                        }
                    }
                }
                $(this).removeClass('scaleChange_L2').addClass('scalePreChangeL2_2');
                count++
            }
        });
    }

    for (let i = 17; i < 19; i++) {
        scaleL2_5("L2_" + i);
        scaleL2_5("s_L2_" + i);
    }

    //  图一类
    //  后项散射系数 & 消光系数
    function scaleL2Pic_1(id, heatMapId, echartState, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L2_5Pic').addClass('scale_L2_Pic');
                // if (judgeTop) {
                //     echartState.setOption({
                //         visualMap: [{
                //             itemHeight: '500%',
                //             top: '15%',
                //             left: '10%'
                //         }]
                //     });
                // } else {
                //     echartState.setOption({
                //         visualMap: [{
                //             itemHeight: '450%',
                //             top: '12%',
                //             left: '5%'
                //         }]
                //     });
                // }
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L2_Pic').addClass('L2_5Pic');
                // if (judgeTop) {
                //     echartState.setOption({
                //         visualMap: [{
                //             itemHeight: '100%',
                //             top: '10%',
                //             left: '3%'
                //         }]
                //     });
                // } else {
                //     echartState.setOption({
                //         visualMap: [{
                //             itemHeight: '100%',
                //             top: '10%',
                //             left: '0%'
                //         }]
                //     });
                // }
                count++;
            }
            echartState.resize();
        });
    }

    //  退偏比 &   激光雷达比
    function scaleL2Pic_2(id, heatMapId, echartState, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L2_2Pic').addClass('scale_L2_Pic');
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L2_Pic').addClass('L2_2Pic');
                count++;
            }
            echartState.resize();
        });
    }

    //  颜色比
    function scaleL2Pic_3(id, heatMapId, echartState, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L2_4Pic').addClass('scale_L2_Pic');
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L2_Pic').addClass('L2_4Pic');
                count++;
            }
            echartState.resize();
        });
    }

    //  图一类
    scaleL2Pic_1("L2_0", "heatMapL2_1", heatMapPicL2_1, 0);
    scaleL2Pic_1("L2_1", "heatMapL2_2", heatMapPicL2_2, 0);
    scaleL2Pic_1("L2_2", "heatMapL2_3", heatMapPicL2_3, 0);
    scaleL2Pic_1("L2_3", "heatMapL2_4", heatMapPicL2_4, 0);
    scaleL2Pic_1("L2_4", "heatMapL2_5", heatMapPicL2_5, 0);
    scaleL2Pic_1("L2_5", "heatMapL2_6", heatMapPicL2_6, 0);
    scaleL2Pic_1("L2_6", "heatMapL2_7", heatMapPicL2_7, 0);
    scaleL2Pic_1("L2_7", "heatMapL2_8", heatMapPicL2_8, 0);
    scaleL2Pic_1("L2_8", "heatMapL2_9", heatMapPicL2_9, 0);
    scaleL2Pic_1("L2_9", "heatMapL2_10", heatMapPicL2_10, 0);

    scaleL2Pic_2("L2_10", "heatMapL2_11", heatMapPicL2_11, 0);
    scaleL2Pic_2("L2_11", "heatMapL2_12", heatMapPicL2_12, 0);

    scaleL2Pic_3("L2_12", "heatMapL2_13", heatMapPicL2_13, 0);
    scaleL2Pic_3("L2_13", "heatMapL2_14", heatMapPicL2_14, 0);
    scaleL2Pic_3("L2_14", "heatMapL2_15", heatMapPicL2_15, 0);
    scaleL2Pic_3("L2_15", "heatMapL2_16", heatMapPicL2_16, 0);

    scaleL2Pic_2("L2_17", "heatMapL2_18", heatMapPicL2_18, 0);
    scaleL2Pic_2("L2_18", "heatMapL2_19", heatMapPicL2_19, 0);


    //图二类
    function s_scaleL2Pic_1(id, heatMapId, lineId, heat, line, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L2_5Pic').addClass('scale_L2_Pic');
                $("#" + lineId).removeClass('L2_5Pic').addClass('scale_L2_Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L2_Pic').addClass('L2_5Pic');
                $("#" + lineId).removeClass('scale_L2_Pic').addClass('L2_5Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 200
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            }
            heat.resize();
            line.resize();
        });
    }

    function s_scaleL2Pic_2(id, heatMapId, lineId, heat, line, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L2_2Pic').addClass('scale_L2_Pic');
                $("#" + lineId).removeClass('L2_2Pic').addClass('scale_L2_Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L2_Pic').addClass('L2_2Pic');
                $("#" + lineId).removeClass('scale_L2_Pic').addClass('L2_2Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 200
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            }
            heat.resize();
            line.resize();
        });
    }

    function s_scaleL2Pic_3(id, heatMapId, lineId, heat, line, count) {
        $("#" + id).resize(function () {
            if (count % 2 !== 0) {
                $("#" + heatMapId).removeClass('L2_4Pic').addClass('scale_L2_Pic');
                $("#" + lineId).removeClass('L2_4Pic').addClass('scale_L2_Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            } else {
                $("#" + heatMapId).removeClass('scale_L2_Pic').addClass('L2_4Pic');
                $("#" + lineId).removeClass('scale_L2_Pic').addClass('L2_4Pic');
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 200
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            }
            heat.resize();
            line.resize();
        });
    }

    //  图二类
    s_scaleL2Pic_1("s_L2_0", "s_heatMapL2_1", "s_lineL2_1", s_heatMapPicL2_1, s_linePicL2_1, 0);
    s_scaleL2Pic_1("s_L2_1", "s_heatMapL2_2", "s_lineL2_2", s_heatMapPicL2_2, s_linePicL2_2, 0);
    s_scaleL2Pic_1("s_L2_2", "s_heatMapL2_3", "s_lineL2_3", s_heatMapPicL2_3, s_linePicL2_3, 0);
    s_scaleL2Pic_1("s_L2_3", "s_heatMapL2_4", "s_lineL2_4", s_heatMapPicL2_4, s_linePicL2_4, 0);
    s_scaleL2Pic_1("s_L2_4", "s_heatMapL2_5", "s_lineL2_5", s_heatMapPicL2_5, s_linePicL2_5, 0);
    s_scaleL2Pic_1("s_L2_5", "s_heatMapL2_6", "s_lineL2_6", s_heatMapPicL2_6, s_linePicL2_6, 0);
    s_scaleL2Pic_1("s_L2_6", "s_heatMapL2_7", "s_lineL2_7", s_heatMapPicL2_7, s_linePicL2_7, 0);
    s_scaleL2Pic_1("s_L2_7", "s_heatMapL2_8", "s_lineL2_8", s_heatMapPicL2_8, s_linePicL2_8, 0);
    s_scaleL2Pic_1("s_L2_8", "s_heatMapL2_9", "s_lineL2_9", s_heatMapPicL2_9, s_linePicL2_9, 0);
    s_scaleL2Pic_1("s_L2_9", "s_heatMapL2_10", "s_lineL2_10", s_heatMapPicL2_10, s_linePicL2_10, 0);

    s_scaleL2Pic_2("s_L2_10", "s_heatMapL2_11", "s_lineL2_11", s_heatMapPicL2_11, s_linePicL2_11, 0);
    s_scaleL2Pic_2("s_L2_11", "s_heatMapL2_12", "s_lineL2_12", s_heatMapPicL2_12, s_linePicL2_12, 0);

    s_scaleL2Pic_3("s_L2_12", "s_heatMapL2_13", "s_lineL2_13", s_heatMapPicL2_13, s_linePicL2_13, 0);
    s_scaleL2Pic_3("s_L2_13", "s_heatMapL2_14", "s_lineL2_14", s_heatMapPicL2_14, s_linePicL2_14, 0);
    s_scaleL2Pic_3("s_L2_14", "s_heatMapL2_15", "s_lineL2_15", s_heatMapPicL2_15, s_linePicL2_15, 0);
    s_scaleL2Pic_3("s_L2_15", "s_heatMapL2_16", "s_lineL2_16", s_heatMapPicL2_16, s_linePicL2_16, 0);
    // s_scaleL2Pic_1("s_L2_16", "s_heatMapL2_17", "s_lineL2_17", s_heatMapPicL2_17, s_linePicL2_17, 0);

    s_scaleL2Pic_2("s_L2_17", "s_heatMapL2_18", "s_lineL2_18", s_heatMapPicL2_18, s_linePicL2_18, 0);
    s_scaleL2Pic_2("s_L2_18", "s_heatMapL2_19", "s_lineL2_19", s_heatMapPicL2_19, s_linePicL2_19, 0);


    function lineMove(line, heat) {
        let movePosition;
        let heatMapData = [1];      //  热力图数据
        let lineData = [];          //  折线图数据
        line.setOption({
            graphic: {
                type: 'rect',
                z: 100,
                shape: {
                    width: 0,
                    height: 200
                },
                position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                draggable: true,
                style: {
                    fill: 'rgba(0,0,0,0.3)',
                    stroke: 'rgba(0,0,0,0.1)',
                    lineWidth: 10
                },
                cursor: 'move',
                ondrag: onPointDragging
            },
        });

        function onPointDragging() {
            //阈值变动
            movePosition = heat.convertFromPixel({xAxisId: 'heatMap'}, this.position[0]);
            // movePosition1 = movePosition * 3 / 100;
            for (let i = 0; i < heatMapData.length; i++) {
                if (heatMapData.length > 0) {
                    if (heatMapData[i][0] === movePosition) {
                        lineData.push(heatMapData[i][2]);
                    }
                }
            }

            line.setOption({
                series: [{
                    markLine: {
                        data: [{xAxis: movePosition}],
                    }
                }, {
                    data: [],
                }, {
                    type: 'line',
                    data: lineData,
                }]
            });

            lineData.length = 0;
        }
    }

    lineMove(s_linePicL2_1, s_heatMapPicL2_1);
    lineMove(s_linePicL2_2, s_heatMapPicL2_2);
    lineMove(s_linePicL2_3, s_heatMapPicL2_3);
    lineMove(s_linePicL2_4, s_heatMapPicL2_4);
    lineMove(s_linePicL2_5, s_heatMapPicL2_5);
    lineMove(s_linePicL2_6, s_heatMapPicL2_6);
    lineMove(s_linePicL2_7, s_heatMapPicL2_7);
    lineMove(s_linePicL2_8, s_heatMapPicL2_8);
    lineMove(s_linePicL2_9, s_heatMapPicL2_9);
    lineMove(s_linePicL2_10, s_heatMapPicL2_10);
    lineMove(s_linePicL2_11, s_heatMapPicL2_11);
    lineMove(s_linePicL2_12, s_heatMapPicL2_12);
    lineMove(s_linePicL2_13, s_heatMapPicL2_13);
    lineMove(s_linePicL2_14, s_heatMapPicL2_14);
    lineMove(s_linePicL2_15, s_heatMapPicL2_15);
    lineMove(s_linePicL2_16, s_heatMapPicL2_16);
    lineMove(s_linePicL2_17, s_heatMapPicL2_17);
    lineMove(s_linePicL2_18, s_heatMapPicL2_18);
    lineMove(s_linePicL2_19, s_heatMapPicL2_19);


    function lineMove1(line, heat) {
        let movePosition;
        let heatMapData = [1];      //  热力图数据
        let lineData = [];          //  折线图数据
        line.setOption({
            graphic: {
                type: 'rect',
                z: 100,
                shape: {
                    width: 0,
                    height: 600
                },
                position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                draggable: true,
                style: {
                    fill: 'rgba(0,0,0,0.3)',
                    stroke: 'rgba(0,0,0,0.1)',
                    lineWidth: 10
                },
                cursor: 'move',
                ondrag: onPointDragging
            },
        });

        function onPointDragging() {
            //阈值变动
            movePosition = heat.convertFromPixel({xAxisId: 'heatMap'}, this.position[0]);
            // movePosition1 = movePosition * 3 / 100;
            for (let i = 0; i < heatMapData.length; i++) {
                if (heatMapData.length > 0) {
                    if (heatMapData[i][0] === movePosition) {
                        lineData.push(heatMapData[i][2]);
                    }
                }
            }

            line.setOption({
                series: [{
                    markLine: {
                        data: [{xAxis: movePosition}],
                    }
                }, {
                    data: [],
                }, {
                    type: 'line',
                    data: lineData,
                }]
            });

            lineData.length = 0;
        }
    }

    lineMove1(s_linePicL3_0, s_heatMapPicL3_0);

});